<template>
    <div class="main-container">
        <levelbar></levelbar>
        <div class="form-box" v-loading="loading">
          <div class="form-title">审核广告</div>
            <el-form :model="dataForm" ref="dataForm" class="form" label-width="96px" label-position='right'>
                <span class="title">广告类型</span>
                <el-row :gutter="41" style="padding-bottom: 38px">
                  <el-col :span="10">
                    <el-form-item label="广告类型：">
                      <!-- <el-input :disabled="true" v-model="typeName"></el-input> -->
                      {{dataForm.advertType == '3' ? '周边教育' : dataForm.advertType == '4' ? '课程学习' :''}}
                    </el-form-item>
                  </el-col>
                </el-row>

                <span class="title" v-if="dataForm.weight == null">广告名称</span>
                <span class="title" v-else>广告名称与权重</span>
                <el-row :gutter="41" style="padding-bottom: 38px">
                  <el-col :span="10">
                    <el-form-item label="广告名称：">
                      <span>{{dataForm.advertName}}</span>
                      <!-- <el-input :disabled="true" v-model="dataForm.advertName"></el-input> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="广告权重：" label-width="116px" v-if="dataForm.weight !== null">
                      <span>{{dataForm.weight == null? '--':dataForm.weight}}</span>
                      <!-- <el-input :disabled="true" v-model="dataForm.weight"></el-input> -->
                    </el-form-item>
                  </el-col>
                </el-row>
              
                <span class="title">广告创建时间与可见级别</span>
                <el-row :gutter="41" style="padding-bottom: 38px">
                  <el-col :span="10">
                    <el-form-item label="创建时间：">
                      <span>{{dataForm.createTime}}</span>
                      <!-- <el-input :disabled="true" v-model="dataForm.createTime" style="width:100%"></el-input> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="可见级别：" label-width="116px">
                      <span>{{level}}</span>
                      <!-- <el-input :disabled="true" v-model="level" style="width:100%"></el-input> -->
                    </el-form-item>
                  </el-col>
                </el-row>

                <span class="title">发布人和发布信息区域</span>
                <el-row :gutter="41" style="padding-bottom: 38px">
                  <el-col :span="10">
                    <el-form-item label="发布人：">
                      <span>{{dataForm.issue}}</span>
                      <!-- <el-input :disabled="true" v-model="dataForm.issue" style="width:100%"></el-input> -->
                    </el-form-item>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item label="发布信息区域：" label-width="116px">
                      <span>{{dataForm.orgName}}</span>
                      <!-- <el-input :disabled="true" v-model="dataForm.orgName" style="width:100%"></el-input> -->
                    </el-form-item>
                  </el-col>
                </el-row>

                <span class="title">广告图片</span>
                <el-row :gutter="41" style="padding-bottom: 38px">
                  <el-col :span="21">
                    <img :src="dataForm.advertPic" style = "max-width:1000px" alt="">
                    <!-- <div class="group_img">
          　　　　　　　　放大图片
           　　          <img-magnification v-if="imgOpt.showImg" @clickit="viewImg" :imgSrc="imgOpt.imgSrc"></img-magnification>
          　　　　　　　　<img id="smallImg" :src="dataForm.advertPic" @click="clickImg($event)">
          　　　　　　</div> -->
                  </el-col>
                </el-row>
                <span class="title">广告链接或自定义内容</span>
                <el-row :gutter="41" style="padding-bottom: 38px">
                  <el-col :span="21">
                    <span v-if="dataForm.showType =='1'" v-html="dataForm.html"></span>
                    <span v-else>链接：{{dataForm.link}}</span>
                  </el-col>
                </el-row>

                <span class="title">发布区域信息</span>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="省份：">
                      <province :disabled="true" v-model="dataForm.provinceId"></province>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="城市：">
                      <city :disabled="true" v-model="dataForm.cityId" :province="dataForm.provinceId" ></city>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row :gutter="41">
                  <el-col :span="10">
                    <el-form-item label="区县：">
                      <region :disabled="true" v-model="dataForm.areaId" :city="dataForm.cityId" ></region>
                    </el-form-item>
                  </el-col>
                </el-row>

                <div class="man-bom"></div>
                <el-row type="flex" justify="center">
                    <el-col :span="2"><el-button @click="cancel">取消</el-button></el-col>
                    <el-col :span="3"><el-button @click="through" type="primary">通过并上线</el-button></el-col>
                    <el-col :span="2"><el-button @click="reject" type="warning">驳回</el-button></el-col>
                </el-row>
            </el-form>
        </div>
        <!-- 审核弹出层 -->
        <layer-up :opinion="opinion"></layer-up>
    </div>
</template>

<script>
import Levelbar from '../../../layout/Levelbar';
import province from 'components/CascadeRegion/province';
import city from 'components/CascadeRegion/city';
import region from 'components/CascadeRegion/region';
import { getAdvertInfoById} from 'api/advApi';
import imgMagnification from './imgMagnification';
import layerUp from './layerUp';
export default {
    name: 'getImgState',
    components: { Levelbar, province, city, region, layerUp, imgMagnification },
    data() {
        return {
            imgOpt: {
                showImg: false,
                imgSrc: ''
            },
            dataForm: {},
            typeName: '',
            level: '',
            opinion: {
                dialogVisible: false,
                id: '',
                start: ''
            }
        };
    },
    created() {
        this.getImg(this.$route.params.id)
    },
    methods: {
        clickImg(e) {
            this.imgOpt.showImg = true;
            // 获取当前图片地址
            this.imgOpt.imgSrc = e.currentTarget.src;
            console.log('this.imgSrc', this.imgOpt.imgSrc);
        },
        viewImg() {
            this.imgOpt.showImg = false;
        },
        getImg(id) {
            this.loading = false;
            console.log(id)
            getAdvertInfoById(id).then(data => {
                this.loading = false;
                this.dataForm = data.data.content;
                console.log('this.dataForm.advertType', this.dataForm.advertType);
                this.typeName = this.dataForm.advertType == '4' ? '周边教育' : this.dataForm.advertType == '3' ? '课程学习' :'';
                console.log(this.typeName);
                this.level = this.dataForm.level == '0' ? '全国' : this.dataForm.level == '1' ? '省级' : this.dataForm.level == '2' ? '市级' : this.dataForm.level == '3' ? '区级' : '';
                console.log('this.level', this.level);
                // {{dataForm.level == '0' ? '全国' : dataForm.level == '1' ? '省级' : dataForm.level == '2' ? '市级' : dataForm.level == '3' ? '区级' : ''}}
            }).catch(Error => {
                this.loading = false;
            })
        },
        cancel() {
            this.$router.go(-1);
        },
        // 通过并上线
        through() {
            this.opinion.dialogVisible= true;
            this.opinion.id = this.$route.params.id;
            this.opinion.start = '0'
            // auditAdvert(this.$route.params.id, '0').then(data => {
            //     this.$router.go(-1);
            // })
        },
        // 驳回
        reject() {
            this.opinion.dialogVisible= true;
            this.opinion.id = this.$route.params.id;
            this.opinion.start = '1'
            // auditAdvert(this.$route.params.id, '1').then(data => {
            //     this.$router.go(-1);
            // })
        }
    }
};
</script>

<style lang="scss" scoped>
.main-container {
  position: relative;
  padding: 20px 20px 10px;
}
.form-box{
    position: relative;
    padding: 0 50px 40px;
    background: #fff;
    .form-title {
        padding-top:8px;
        text-align: center;
        font-size: 18px;
        color: #333;
        line-height: 72px;
        font-weight: bold;
        font-family: Microsoft YaHei;
        border-bottom: 1px solid #ddd;
    }
}
.man-bom {
  margin: 20px 0;
}
.box {
  margin: 20px 0;
}
.title {
  position: relative;
  font-size: 14px;
  color: rgb(106, 85, 72);
  padding-left: 14px;
  margin: 40px 0;
  display: block;
  &::after {
    position: absolute;
    content: "";
    width: 4px;
    height: 14px;
    background: #ff5e2c;
    left: 0;
    top: 4px;
  }
}
.describe {
  font-size: 14px;
  color: #666;
  margin: 20px 0;
}
i {
  font-style: normal;
  color: #999;
}
.el-upload-new {
  display: inline-block;
  text-align: center;
  cursor: pointer;
}
.el-upload-picture-new {
  border-radius: 6px;
  background-color: #fbfdff;
  border: 1px dashed transparent;
  box-sizing: border-box;
  width: 148px;
  height: 148px;
  cursor: pointer;
  line-height: 146px;
  vertical-align: top;
  i {
    font-size: 28px;
    color: #8c939d;
  }
}
</style>